<template>
	<view class="container">
		<z-paging ref="paging" :auto='true' bg-color=" #F5F5F5" class="zpaing" v-model="dataList" @query="getDataList">
			<view class="zPagingLoad" slot="loading">
				<u-loading-icon size="25"></u-loading-icon>
			</view>
			<view class="listContent">
				<view class="itemDiv" v-for="(item,index) in dataList" :key="index">
					<view class="left">
						<image src="/static/images/nav-tag-1.png" mode=""></image>
					</view>
					<view class="right">
						<text class="fontWeight">60分钟肩颈疏通+艾灸</text>
						<view class="rightP">
							<text class="time">60分钟</text>
							<text>医师</text>
						</view>
						<view class="price fontWeight">
							<text>￥</text>
							<text class="number">288</text>
						</view>
					</view>
					<view class="itemBtn">
						<text>编辑</text>
					</view>
				</view>
			</view>
			<view slot="bottom">
				<view class="commonBtn">
					<view class="btnCon" @tap="goto('pages/owns/service/addService')">
						<text>新增服务</text>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import baseMixin from "@/mixin/baseMixin.js"
	export default {
		mixins: [baseMixin],
		data() {
			return {
				dataList: []
			};
		},
		methods: {
			getDataList(pageNo, pageSize) {
				this.$refs.paging.complete([{},
					{},
					{},
				]);
				// let params = {
				// 	pageNo: pageNo,
				// 	pageSize: pageSize
				// }
				// this.fnTestList(params).then((res) => {
				// 	this.$refs.paging.complete(res.rows);
				// })
			},
		}
	};
</script>

<style lang="scss" scoped>
	
	.fontWeight{
		font-weight: bold;
	}
	
	.container {
		position: relative;

		.listContent {
			padding: 0 24rpx;

			.itemDiv {
				position: relative;
				background-color: #fff;
				margin-top: 24rpx;
				border-radius: 24rpx;
				padding: 16rpx;
				display: flex;
				align-items: center;

				.left {
					image {
						width: 128rpx;
						height: 128rpx;
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					font-size: 28rpx;
					margin-left: 16rpx;

					.rightP {
						display: flex;
						align-items: center;
						margin: 8rpx 0;
						font-size: 24rpx;
						color: rgba(94, 103, 110, 1);

						.time {
							margin-right: 24rpx;
						}
					}

					.price {
						font-size: 20rpx;
						color: rgba(255, 140, 64, 1);

						.number {
							font-size: 28rpx;
						}
					}
				}

				.itemBtn {
					position: absolute;
					right: 16rpx;
					bottom: 16rpx;
					width: 112rpx;
					height: 48rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: $theme-color;
					color: #fff;
					border-radius: 24rpx;
					font-size: 28rpx;
				}
			}
		}

	}
</style>